---
title: "Top / Right / Bottom / Left"
# description: "Utilities for controlling the placement of positioned elements."
description: "用于控制被定位的元素的位置的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/inset'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirst } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirst,
}

## 使用方法

<!-- Use the `{top|right|bottom|left|inset}-0` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. -->
使用 `{top|right|bottom|left|inset}-0` 功能类，将绝对定位的元素锚定在最近定位的父元素的任何边缘上。

<!-- Combined with Tailwind's padding and margin utilities, you'll probably find that these are all you need to precisely control absolutely positioned elements. -->
结合 Tailwind 的 padding 和 margin 功能类，您可能会发现这些是所有的您需要的用来精确控制绝对定位元素的功能类。

```html emerald
<template preview>
  <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute inset-x-0 top-0 h-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">1</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute inset-y-0 right-0 w-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">2</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute inset-x-0 bottom-0 h-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">3</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute inset-y-0 left-0 w-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">4</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute inset-0 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">5</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute left-0 top-0 h-16 w-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">6</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute top-0 right-0 h-16 w-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">7</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute right-0 bottom-0 h-16 w-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">8</div>
    </div>
    <div class="relative p-2 h-32 w-32 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
      <div class="absolute bottom-0 left-0 h-16 w-16 bg-emerald-500 text-white font-extrabold text-2xl flex items-center justify-center rounded-md">9</div>
    </div>
  </div>
</template>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **inset-x-0 top-0** h-16 w-16 ...">1</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **inset-y-0 right-0** w-16 ...">2</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **inset-x-0 bottom-0** h-16 w-16 ...">3</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **inset-y-0 left-0** w-16 ...">4</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **inset-0** ...">5</div>
</div>

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **left-0 top-0** h-16 w-16 ...">6</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **top-0 right-0** h-16 w-16 ...">7</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **bottom-0 right-0** h-16 w-16 ...">8</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute **bottom-0 left-0** h-16 w-16 ...">9</div>
</div>
```

## 响应式

<!-- To position an element only at a specific breakpoint, add a `{screen}:` prefix to any existing positioning utility. For example, adding the class `md:inset-y-0` to an element would apply the `inset-y-0` utility at medium screen sizes and above. -->
要仅在特定的断点处定位一个元素，请在任何现有的定位功能类前添加 `{screen}:` 前缀。例如，将 `md:inset-y-0` 类添加到一个元素上，就可以在中等尺寸及以上的屏幕上使用 `inset-y-0` 功能类。

```html
<div class="relative h-32 ...">
  <div class="absolute inset-0 **md:inset-y-0** ..."></div>
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### Top / Right / Bottom / Left scale

<!-- By default Tailwind only provides `0` and `auto` top/right/bottom/left/inset utilities. You can change, add, or remove these by editing the `theme.inset` section of your `tailwind.config.js` file. -->
默认情况下，Tailwind 只提供值为 `0` 和 `auto` 的 top/right/bottom/left/inset 功能类。您可以通过编辑 `tailwind.config.js` 文件中的 `theme.inset` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      inset: {
        '0': 0,
-       auto: 'auto',
+       '1/2': '50%',
      }
    }
  }
```

<!-- ### Negative values -->
### 负值

<!-- If you'd like to add any negative top/right/bottom/left classes that take the same form as Tailwind's [negative margin](/docs/margin#negative-margins) classes, prefix the keys in your config file with a dash: -->
如果您想添加任何负的 top/right/bottom/left 类，在您的配置文件中的键前加上破折号。这些类与 Tailwind 的 [负外边距] (/docs/margin#negative-margins) 类的形式相同。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        inset: {
+         '-16': '-4rem',
        }
      }
    }
  }
```

<!-- Tailwind is smart enough to generate classes like `-top-16` when it sees the leading dash, not `top--16` like you might expect. -->
Tailwind 很聪明，当它看到前面的破折号时，就会生成像 `-top-16` 这样的类，而不是像您可能想象的那样生成 `top--16`。

### 变体

<Variants plugin="inset" name="top, right, bottom, left, and inset" />

### 禁用

<Disabling plugin="inset" name="top, right, bottom, left, and inset" />
